<template>
  <div class="app-content">
    <div class="search-content">
      <Title title="产品信息"></Title>
      <!-- <el-input
        v-model="queryParams.detailQuery"
        placeholder="可查询SAP物料号/产品名称"
        clearable
        size="small"
        class="search-input1"
        @keyup.enter.native="handleQuery"
        suffix-icon="el-icon-search"
      /> -->
      <div class="search-input-content">
        <el-input
          v-model="queryParams.findString"
          placeholder="可查询SPA物料号/产品名称"
          size="small"
          class="search-input"
          @keyup.enter.native="handleQuery"
        >
        </el-input>

        <i class="el-icon-search search-icon" @click="handleQuery"></i>
        <i
          class="el-icon-circle-close search-icon"
          v-if="queryParams.findString"
          @click="clear()"
        ></i>
      </div>
    </div>

    <div class="app-container">
      <el-button @click="handleGroup" class="groupBtn" :disabled="multiple"
        >产品组合</el-button
      >

      <el-table
        stripe
        :data="productList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          :selectable="selected"
        />
        <el-table-column label="序号" prop="index" width="55">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="组合编号" align="center">
          <template slot-scope="scope">{{
            scope.row.isGroup == 1 ? scope.row.group.groupCode : ""
          }}</template>
        </el-table-column>
        <el-table-column
          label="组合名称"
          align="center"
          prop="productGroupName"
        >
          <template slot-scope="scope">{{
            scope.row.isGroup == 1 ? scope.row.group.groupName : ""
          }}</template>
        </el-table-column>
        <el-table-column label="SAP物料号" align="center" prop="salesSapId" />
        <el-table-column label="产品名称" align="center" prop="prdtName" />
        <el-table-column label="产品型号" align="center" prop="prdtModelNo" />
        <!-- <el-table-column
          label="厂商名称"
          align="center"
          prop="manufactureName"
        />
        <el-table-column label="产品分类" align="center" prop="type1Id" /> -->
        <el-table-column label="产品状态" align="center" prop="prdtStatus" />
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 对话框 -->
      <el-dialog
        title="组合名称"
        :visible.sync="open"
        width="430px"
        append-to-body
      >
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="组合名称：" prop="groupName">
                <el-input
                  v-model="form.groupName"
                  placeholder="请输入组合名称"
                  size="small"
                  style="width: 280px"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel" size="small">取消</el-button>
          <el-button type="danger" @click="submitForm" size="small"
            >确定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Title from "../../components/title";
// import { getProductList, groupProducts } from "@/api/product/information";
import productList from "../../../static/product/proList.json";

export default {
  name: "order",
  components: { Title },
  data() {
    return {
      title: "订单管理",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 公告表格数据
      productList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 类型数据字典
      statusOptions: [],
      // 状态数据字典
      typeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        findString: undefined,
        findGroupNull: 0,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        groupName: [
          { required: true, message: "组合名称不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 查询产品信息列表
    getList() {
      // this.loading = true;
      this.productList = productList.rows;
      this.total = productList.total;
      // getProductList(this.queryParams).then((response) => {
      //   this.productList = response.rows;
      //   this.total = response.total;
      //   this.loading = false;
      // });
    },
    // 组合产品对话框
    handleGroup() {
      this.open = true;
      // 重置表单
      this.form = {};
      // console.log(this.ids);
    },
    // 多选框是否可以选中
    selected(row, index) {
      if (row.isGroup == 1) {
        return false; //不可勾选
      } else {
        return true; //可勾选
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        groupName: undefined,
      };
      this.resetForm("form");
    },
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log("多选框选中数据");
      this.ids = selection.map((item) => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    //提交按钮
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const params = {
            ...this.form,
            prdtIds: this.ids.join(),
          };
          // debugger;
          groupProducts(params).then((res) => {
            if (res.code == 200) {
              this.msgSuccess("组合成功");
              this.open = false;
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    // 获取产品的组合信心-0-组合编号，1-组合名称
    getProductFormat(data, a) {
      console.log(data);
      if (a == 0) {
        return data.groupCode;
      } else {
        return data.groupName;
      }
    },
    // 清空
    clear() {
      (this.queryParams.findString = ""), this.handleQuery();
    },
  },
};
</script>

<style lang="scss" rel="stylesheet/scss"  scoped>
.search-content {
  display: flex;
  // background-image: url("../../../assets/images/title.png") no-repeat;
  height: 50px;
  width: 100%;
  background: #fff;
  font-size: 18px;
  font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  font-weight: 600;
  text-align: left;
  color: #333333;
  border-bottom: 2px solid #f5f7fa;
  justify-content: space-between;
  .search-input {
    width: 190px;
    height: 30px;
    margin-left: 10px;
    // margin: auto 20px;
  }
  .search-input1 {
    width: 210px;
    height: 30px;
    margin: auto 20px;
    border-radius: 4px;
  }
}
::v-deep .search-input .el-input__inner {
  // border-radius: 16px;
  border: 0px;
}
::v-deep .search-input1 .el-input__inner {
  border-radius: 16px;
}
.groupBtn {
  width: 80px;
  height: 32px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  // background-image: url("../../assets/images/product/btn.png");
  // background-size: cover;
  background: #e60012;
  margin-bottom: 10px;
}
// 按钮文字居中
::v-deep .groupBtn {
  position: relative;
  span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>